<template>
    <section class="yun_xing_plane">
  				<div class="" v-show="showYunxingPlane==='1'">
					<el-form-item label="开始时间:" required>
						<el-time-picker
						format="HH:mm"
						value-format="HH:mm"	
					    v-model="form.stratTime"
					    :picker-options="{
					      selectableRange: '00:00:00 - 23:59:59'
					    }"
					    placeholder="任意时间点">
					 </el-time-picker>	
					</el-form-item>
					<el-form-item label="间隔时间:" required>
						<el-input v-model="form.jiangeHours" type="number" style="width: 220px;"></el-input>&nbsp;&nbsp;分钟
					</el-form-item>
					<el-form-item label="结束时间:" required>
						<el-time-picker
						format="HH:mm"
						value-format="HH:mm"	
					    v-model="form.endTime"
					    :picker-options="{
					      selectableRange: '00:00:00 - 23:59:59'
					    }"
					  
					    placeholder="任意时间点">
					 </el-time-picker>	
					</el-form-item>
				</div>
				<div class="" v-show="showYunxingPlane==='2'">
					<el-form-item label="开始时间:" required>
						<el-time-picker
						format="HH:mm"
						value-format="HH:mm"
					    v-model="form.stratTime"
					    :picker-options="{
					      selectableRange: '00:00:00 - 23:59:59'
					    }"
					    placeholder="任意时间点">
					 </el-time-picker>	
					</el-form-item>
					<el-form-item label="间隔时间:" required>
						<el-input v-model="form.jiangeHours" type="number" style="width: 220px;"></el-input>&nbsp;&nbsp;小时
					</el-form-item>
					<el-form-item label="结束时间:" required>
						<el-time-picker
						format="HH:mm"
						value-format="HH:mm"		
					    v-model="form.endTime"
					    :picker-options="{
					      selectableRange: '00:00:00 - 23:59:59'
					    }"
					  
					    placeholder="任意时间点">
					 </el-time-picker>	
					</el-form-item>
				</div>
				
				<div class="" v-show="showYunxingPlane==='3'">
					<el-form-item label="具体时间:" required>
						<el-time-picker
						format="HH:mm"
						value-format="HH:mm"		
					    v-model="form.jutiTime"
					    :picker-options="{
					      selectableRange: '00:00:00 - 23:59:59'
					    }"
					    placeholder="具体时间点">
					     </el-time-picker>	
					</el-form-item>
				</div>
				
				<div class="" v-show="showYunxingPlane==='4'">
					<el-form-item label="选择时间:" required>
						<el-checkbox-group v-model="form.chooseWeek">
						     <el-checkbox-button class="box_checkbox" v-for="(item,index) in chooseWeek" :label="item.label" :key="item.name">{{item.label}}</el-checkbox-button>
						</el-checkbox-group>
					</el-form-item>
					
					<el-form-item label="具体时间:" required>
					 	<el-time-picker
					 	format="HH:mm"
						value-format="HH:mm"	
					    v-model="form.jutiTime"
					    :picker-options="{
					      selectableRange: '00:00:00 - 23:59:59'
					    }"
					    placeholder="具体时间点">
					     </el-time-picker>	
					</el-form-item>
				</div>
				
				
				<div class="" v-show="showYunxingPlane==='5'">
					<el-form-item label="选择时间:" required>     
						<el-popover
						  placement="right"
						  width="400"
						  v-model="everyMonthVisible"
						  trigger="click">
						 <el-checkbox-group v-model="everyMonth">
						  <el-checkbox class="everyMonth_checkbox" style="width: 60px;margin:10px 0 0 30px;" v-for="(item,index) in everyMonthCheckBox" :label="item.label" :name="item.name" :key="index"></el-checkbox>
							<el-button type="primary"  size="mini" @click="chooseEveryMonth">确定</el-button>
						 </el-checkbox-group>
						 <el-button slot="reference">
						 	 <span class="everyMonth_span" v-for="(item ,index) in form.everyMonth" :key="index">
						 		<i class="el-icon-circle-close-outline"></i>
						 		{{item}}
						 </span>
						 </el-button>
						</el-popover>
					</el-form-item>
					
					<el-form-item label="具体时间:" required>  
					 	<el-time-picker
					 	format="HH:mm"
						value-format="HH:mm"	
					    v-model="form.jutiTime"
					    :picker-options="{
					      selectableRange: '00:00:00 - 23:59:59'
					    }"
					    placeholder="具体时间点">
					     </el-time-picker>	
					</el-form-item>
        		</div>
    </section>
</template>

<script>
    
    export default {
    	props:{
    		showYunxingPlane:'',
    		timeSubmit:Boolean
    	},
        data() {
          return {
          		everyMonthVisible:false,
          		everyMonth:[],
          		form:{
          			endTime:"",
          			stratTime:'',
          			jiangeHours:"",
          			jutiTime:"",
          			chooseWeek:[],
          			everyMonth:[],
          		},
          		smRunPlan:{  
							"runMethod":''
							,"startTime":""
							,"intervalTime":''  
							,"endTime":""
							,"selectTime":''
				},
          		chooseWeek:[
          			{
          				label:'星期一',
          				name:'1'
          			},
          		],
          		everyMonthCheckBox:[
          			{
          				label:'1号',
          				name :'1'
          			},
          		],
          };
        },
        methods: {
        	chooseEveryMonth(){
        		this.form.everyMonth = this.everyMonth;
        		this.everyMonthVisible =false;
        	}
        },
        watch:{
        	timeSubmit(newVal){
        		this.smRunPlan.runMethod=this.showYunxingPlane;/*运行计划的方式*/
        		this.smRunPlan.startTime=this.form.stratTime||this.form.jutiTime;/*开始时间，具体时间*/
        		this.smRunPlan.intervalTime=this.form.jiangeHours;/*间隔时间*/
        		this.smRunPlan.endTime=this.form.endTime;/*结束时间*/
        		if(this.showYunxingPlane==='4'){/*4类型的具体时间*/
        			this.smRunPlan.selectTime = this.form.chooseWeek.join();
        		}
        		if(this.showYunxingPlane==='5'){/*5类型的具体时间*/
        			this.smRunPlan.selectTime=this.form.everyMonth.join();
        		}
        		this.$emit('outPutForm',this.smRunPlan);
        	}
        }
  };
</script>

<style scoped="scoped">
    
</style>